<template>
    <view class="d-flex a-center" style="height: 90rpx; width: 750rpx;">
        <!-- 左边 -->
        <view style="width: 85rpx;" class="d-flex a-center j-center">
            <text class="iconfont icon-xiaoxi" style="font-size: 50rpx;"></text>
        </view>
        <!-- 中间 -->
        <view class="flex-1 bg-light rounded d-flex a-center text-light-muted" style="height: 65rpx;" @click="openSearch">
            <text class="iconfont icon-sousuo mx-2" style="font-size: 30rpx;"></text>
            扎染
        </view>
        <!-- 右边 -->
        <view style="width: 85rpx;" class="d-flex a-center j-center">
            <text class="iconfont icon-saoyisao" style="font-size: 50rpx;"></text>
        </view>
    </view>

    <!-- 内容区域 -->
    <swiper :duration="150" :current="tabIndex" :style="'height:'+scrollH+'px;'" @change="onChangeTab">
        <swiper-item v-for="(item, index) in newsitems" :key="index">
            <scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)" :show-scrollbar="false">
                

                <template v-if="item.list.length > 0">
                    <block v-for="(list, listIndex) in item.list" :key="listIndex">
                        <!-- 轮播图组件 -->
                        <swiper indicator-dots autoplay :interval="3000" :duration="200" circular style="height: 350rpx;width: 750rpx;" v-if="list.type === 'swiper'">
                            <swiper-item v-for="(slide, slideIndex) in list.data" :key="slideIndex">
                                <image :src="slide.src" lazy-load style="height: 350rpx;width: 750rpx;"></image>
                            </swiper-item>
                        </swiper>

                        <template v-else-if="list.type === 'indexnavs'">
                            
                               <!-- 首页分类 -->
                                <index-nav :resdata="list.data" /> <!-- 使用更新后的index-nav组件 -->
                                <divider />
                                                    
                            <!-- 新增的通知栏 -->
                            <view class="notification-bar">
                                这是一个通知栏示例！欢迎访问我们的平台。
                            </view>
                        </template>

                        <template v-else-if="list.type === 'threeAdv'">
                            <!-- 三图广告 -->
                            <three-adv :resdata="list.data" />
                            <divider />

                            <!-- 卡片组件 -->
                            <card 
                                headTitle="每日精选" 
                                bodyCover='../../static/images/jingx1.jpg'
								
                                :bodyPadding="true"
                                :headTitleWeight="true"
                            >
                                <!-- 这里是 card 的 body 内容 -->
                                <view>
                                    <text>这里是 card 组件的自定义内容。</text>
                                </view>
                            </card>
                        </template>

                        <!-- 公共列表组件 750 - 5 = 745   372.5-->
                        <view class="row j-sb" v-else-if="list.type === 'list'">
                            <block v-for="(item2, index2) in list.data" :key="index2">
                                <common-list :item="item2" :index="index2" />
                            </block>
                        </view>
                    </block>

                    <!-- 上拉加载更多 -->
                    <divider />

                    
                </template>

                <view v-else-if="item.firstLoad === 'before' || item.firstLoad === 'ing'" class="d-flex j-center a-center pt-5"><text class="font-md text-light-muted">加载中...</text></view>
                <view v-else class="d-flex j-center a-center pt-5"><text class="font-md text-light-muted">暂无数据</text></view>
            </scroll-view>
        </swiper-item>
    </swiper>
</template>

<script>
import indexNav from "@/components/index/index-nav.vue";
import threeAdv from "@/components/index/three-adv.vue";
import card from "@/components/common/card.vue"; // 引入卡片组件
import commonList from "@/components/common/common-list.vue";
import divider from "@/components/common/divider.vue";

export default {
    components: {
        indexNav,
        threeAdv,
        card, // 注册卡片组件
        commonList,
        divider
    },
    data() {
        return {
            tabIndex: 0,
            scrollH: 600, // 假设滚动高度为600px
            newsitems: [
                {
                    list: [
                        {
                            type: 'swiper',
                            data: [
								{ src: '../../static/images/lunbotu4.jpg' },
                                { src: '../../static/images/lunbotu5.jpg' },
                                { src: '../../static/images/lunbotu6.jpg' }, // 假设有第二个图片
                                { src: '../../static/images/lunbotu8.jpg' }  // 假设有第三个图片
                            ]
                        },
                        {
                            type: 'indexnavs',
                            data: [
                                { src: '../../static/images/indexnav/shouyetub1.jpg', text: "走进非遗" },
                                { src: '../../static/images/indexnav/shouyetub2.png', text: "非遗资讯" },
                                { src: '../../static/images/indexnav/shouyetub3.jpg', text: "精彩活动" },
                                { src: '../../static/images/indexnav/shouyetub4.jpg', text: "探访非遗馆" },
                                { src: '../../static/images/indexnav/shouyetub5.jpg', text: "探访传习馆" },
								{ src: '../../static/images/indexnav/shouyetub6.jpg', text: "舌尖非遗" },
								
                            ]
                        },
                        {
                            type: 'threeAdv',
                            data: [
                                { src: '../../static/images/xuanchuang4.jpg' },
                                { src: '../../static/images/xuanchuang2.jpg' },
                                { src: '../../static/images/xuanchuang3.jpg' }
                            ]
                        },
                        {
                            type: 'list',
                            data: [
                                {
                                    title: 'Item 1',
                                    priceIcon: '../../static/images/price-icon.png', // 添加价格图标
                                    cover: '../../static/images/product2.jpg' ,// 添加图片
									desc:"30001人购买",
									oprice:2688,
									pprice:1666
                                },
                                {
                                    title: 'Item 1',
                                    priceIcon: '../../static/images/price-icon.png', // 添加价格图标
                                    cover: '../../static/images/product1.jpg' ,// 添加图片
                                    desc:"30001人购买",
                                    oprice:2688,
                                    pprice:1666
                                },
								{
								    title: 'Item 1',
								    priceIcon: '../../static/images/price-icon.png', // 添加价格图标
								    cover: '../../static/images/product1.jpg' ,// 添加图片
									desc:"30001人购买",
									oprice:2688,
									pprice:1666
								},
								{
								    title: 'Item 1',
								    priceIcon: '../../static/images/price-icon.png', // 添加价格图标
								    cover: '../../static/images/product1.jpg' ,// 添加图片
									desc:"30001人购买",
									oprice:2688,
									pprice:1666
								},
                            ]
                        }
                    ],
                    refreshShow: false,
                    refreshText: '',
                    loadingShow: false,
                    loadtext: '上拉加载更多',
                    firstLoad: 'done'
                }
            ]
        };
    },
    methods: {
        openSearch() {
                   // 使用 uni.navigateTo 跳转到 search 页面
                   uni.navigateTo({
                       url: '/pages/search/search'
                   });
               },
        onChangeTab(event) {
            this.tabIndex = event.detail.current;
        },
        loadmore(index) {
            console.log('Loading more for tab:', index);
        },
        refresh() {
            console.log('Refreshing...');
        },
        pullingdown() {
            console.log('Pulling down...');
        },
        onLoading() {
            console.log('Loading...');
        }
    }
};
</script>

<style>
/* 基本样式 */
.notification-bar {
    background-color: #f0f0f0;
    padding: 20rpx;
    font-size: 32rpx;
    color: #333;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    width: 710rpx; /* 稍微减小宽度以适应内容区域 */
    margin-left: 20rpx;
    margin-right: 20rpx;
    text-align: center;
}
/* 首页分类容器 */
.index-nav-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 均匀分布 */
}

.index-nav-container > view {
    width: 33.33%; /* 每个图标占据三分之一宽度 */
    box-sizing: border-box; /* 确保 padding 不影响布局 */
}


/* 每行容器 */
.index-nav-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20rpx;
}

/* 单个图标容器 */
.index-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10rpx;
}

/* 图标样式 */
.index-nav .icon {
    font-size: 60rpx; /* 放大图标 */
    color: #333; /* 图标颜色 */
}

/* 图标文字样式 */
.index-nav .text {
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;
}
</style>